<template>
  <div v-loading="loading">
    <div class="card">
      <div class="card-body">
        <div class="report-title">基本信息</div>
        <div class="row">
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">投标名称：</div>
              <div class="dl-dd">{{ sectionName }}</div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">投标金额：</div>
              <div class="dl-dd">{{ infoData.tender_bond }} 元</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">申请人：</div>
              <div class="dl-dd">{{ infoData.enterprise_name }}</div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">申请时间：</div>
              <div class="dl-dd">{{ infoData.create_time }}</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">营业执照：</div>
              <div class="dl-dd">{{ infoData.enterprise_code }}</div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">联系电话：</div>
              <div class="dl-dd">{{ infoData.agent_phone }}</div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">担保金额：</div>
              <div class="dl-dd">{{ infoData.tender_bond }} 元</div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">担保费：</div>
              <div class="dl-dd">{{ infoData.gua_fee }} 元</div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">开标时间：</div>
              <div class="dl-dd">{{ openTime }}</div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">投标有效期：</div>
              <div class="dl-dd">{{ tenderMonths }} 个月 ({{ infoData.tender_expire }} 天)</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <div class="report-title">流程信息</div>
        <el-steps :active="active" align-center>
          <el-step title="客户已下单" :description="infoData.create_time"></el-step>
          <el-step title="项目受理" :description="infoData.claim_time"></el-step>
          <el-step
            title="项目审批"
            :status="infoData.approveStatus"
            :description="infoData.approval_end_date"
          ></el-step>
          <el-step title="客户处理(付款)">
            <template slot="description">
              <div class="step-item">
                <div :class="+this.infoData.pay_status === 2 ? 'text-primary' : 'text-muted'">
                  <!-- {{ +this.infoData.pay_status === 2 ? '已付款' : '待付款' }}： -->
                  {{ infoData.pay_time || '-' }}
                </div>
                <!-- <div
                  :class="+this.infoData.customer_sign_status === 1 ? 'text-primary' : 'text-muted'"
                >
                  {{ +this.infoData.customer_sign_status === 1 ? '已签约' : '待签约' }}：{{
                    infoData.customer_sign_time || '-'
                  }}
                </div> -->
              </div>
            </template>
          </el-step>
          <el-step title="订单完成"></el-step>
        </el-steps>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <div class="report-title">附件信息</div>
        <attach-main
          :related-id="queryId"
          :entrust-id="infoData.doc_id"
          :letter-id="infoData.doc_id_bh"
        ></attach-main>
      </div>
    </div>
  </div>
</template>

<script>
import AttachMain from '@/bigcredit/views/letter/apply/accept/AttachMain'
export default {
  components: {
    AttachMain,
  },
  props: {
    queryId: String,
  },
  data() {
    return {
      loading: false,
      infoData: {},
      tableName: 'guarantee_project_view',
      active: 1,
    }
  },
  computed: {
    tenderMonths() {
      return Math.round(this.infoData.tender_expire / 30)
    },
    sectionName() {
      const { section_name, section_code } = this.infoData
      return `${section_name}${section_code ? '-' + section_code : ''}`
    },
    openTime() {
      const date = this.infoData.open_time || ''
      return `${date.substring(0, 4)}-${date.substring(4, 6)}-${date.substring(
        6,
        8
      )} ${date.substring(8, 10)}:${date.substring(10, 12)}`
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'customer_related_id.eq': this.queryId })
        .then(res => {
          this.infoData = res?.data?.[0] ?? {}
          this.infoData.approveStatus = 'wait'
          if (+this.infoData.approval_status === 3) {
            this.infoData.approveStatus = 'error'
          }
          if (+this.infoData.pay_status === 2) {
            // 已付款 && +this.infoData.customer_sign_status === 1
            this.infoData.approveStatus = 'finish'
            this.active = 5
          } else if (+this.infoData.approval_status === 2) {
            this.infoData.approveStatus = 'finish'
            this.active = 3
          } else if (+this.infoData.claim_status > 0) {
            this.active = 2
          } else {
            this.active = 1
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.report-title {
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.2rem;
}

// .step-item {
//   width: 100px !important;
// }
</style>
